import React, { useState,memo,useEffect } from 'react';
import { connect } from 'react-redux';
import { addAdressAction } from '../../store/actions';
import style from './index.module.scss';

import { Picker, List } from 'antd-mobile';
import { district } from 'antd-mobile-demo-data';
import {useHistory} from 'react-router';
import Header from '../../components/Header';
const WrapHeader = memo(Header);

interface Iprops {
    addAdr:(info:{[key:string]:any})=>void,
    location:{ [key: string]: any }
}

const CustomChildren = (props: any) => (
    <div
        onClick={props.onClick}
        style={{ backgroundColor: '#fff', paddingLeft: 15 }}
    >
        <div className="test" style={{ display: 'flex', height: '100px', lineHeight: '100px' }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
)

const Addtoadr: React.FC<Iprops> = props => {
    const history = useHistory();
    const [user, setUser] = useState('');
    const [phone, setPhone] = useState('');
    const [addr, setAddr] = useState('');
    const [save, setSave] = useState(false);
    const [pickerValue, setPickerValue] = useState([]);

    const {state:{info}} = props.location;
    useEffect(function(){
        if(info){
            setUser(info.name);
            setPhone(info.mobile);
            setAddr(info.address);
            // setUser(info.name);
        }
    },[info])
    const onSure = (v: any) => {
        console.log(v);
        // setPickerValue(v)
    }
    const addFunc = ()=>{
        props.addAdr(
            {
                address: addr,
                city_id: 37,
                district_id: 403,
                province_id: 2,
                is_default: save,
                mobile: phone,
                name: user,
                id:info?info.id:null
            }
        );
        history.push('/adress')
    }
    return <div className={style.addtoadr}>
        <WrapHeader title={'新增地址'} />
        <div className={style.content}>
            <p><input type="text" value={user} onChange={(e) => setUser(e.target.value)} placeholder="姓名" /></p>
            <p><input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="电话号码" /></p>
            <List style={{ backgroundColor: 'white' }} className="picker-list">
                <Picker
                    title="选择地区"
                    extra="请选择地区"
                    data={district}
                    value={pickerValue}
                    onChange={(v:any) => setPickerValue(v)}
                    onOk={(v: any) => onSure(v)}
                >
                    <CustomChildren></CustomChildren>
                </Picker>
            </List>
            <p><input type="text" value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="详细地址" /></p>
            <p>设置默认地址 <button className={save?style.active:""} onClick={()=>setSave(!save)}>✓</button></p>
        </div>
        <div className={style.footer}>
            <button onClick={()=>history.push('/adress')}>取消</button>
            <button 
                onClick={addFunc}
            >保存</button>
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.adress
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        addAdr: (info:{[key:string]:any}) => {
            dispatch(addAdressAction(info))
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Addtoadr) 
